<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <!-- <el-form-item>
                    <el-date-picker style="width:240px" :editable="false" :clearable="false" v-model="pickerDate"
                        value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item>
                    <el-select style="width:130px" placeholder="选择门店" v-model="formInline.store_id" filterable>
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item>
                    <el-select :clearable="true" filterable placeholder="选择类型" v-model="formInline.type"
                        style="width:130px" @change="typeChange">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-select style="width:130px" v-model="search_type" filterable @change="searchTypeChange">
                        <el-option v-for="item in searchList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="search_font" :maxlength="30" :placeholder="searchPlaceholder" @keyup.enter.native="searchClick"
                        style="width:130px"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <transition name="fade" mode="out-in" :key="formInline.type">
                <!-- 表格 -->
                <el-table highlight-current-row :data="list" v-loading.body="listLoading" size="small" border>
                    <el-table-column align="center" label='卡号' prop="card_no"></el-table-column>
                    <el-table-column align="center" label='姓名' prop="user_name"></el-table-column>
                    <el-table-column align="center" label='性别' prop="sex" width="80"></el-table-column>
                    <el-table-column align="center" label='手机' prop="mobile"></el-table-column>
                    <el-table-column align="center" label='用户类型'>
                        <template slot-scope="scope">
                            {{scope.row.type_id==5 ?'E舞成名卡':scope.row.type_id}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='所属门店' prop="store_name"></el-table-column>
                    <el-table-column align="center" label='注册时间' prop="date_create"></el-table-column>
                    <el-table-column align="center" label='到期时间' prop="date_valid"></el-table-column>
                    <el-table-column  align="center" label='可用币数' prop="coins"></el-table-column>
                    <el-table-column align="center" label='可用积分' prop="score"></el-table-column>
                    <el-table-column align="center" label='可用票数'>
                        <template slot-scope="scope">
                            {{scope.row.card_type_id=='--' ?'--':scope.row.ticket_num}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='可用星数'
                        prop="stars">
                    </el-table-column>
                    <el-table-column align="center" label='可用次数'>
                        <template slot-scope="scope">
                            {{scope.row.times==-1 ?'-':scope.row.times}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='状态' width="100">
                        <template slot-scope="scope">
                            <span :class="{success:scope.row.status=='正常'}">
                                {{scope.row.status}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width="130">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="editClick(scope.row,scope.$index)" size="small"> 审
                                核 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </transition>
            <!-- 弹框 -->
            <el-dialog class="dialog_table_small" :close-on-click-modal="false" title="审核" :visible.sync="infoDialog" width="800px">
                <p style="margin-top:0">{{infoData.store_name}} - {{infoData.type_id}} {{infoData.card_no}} - {{infoData.user_name}}</p>
                <el-table highlight-current-row  :data="checkList" v-loading.body="checkListLoading" size="small" border>
                    <el-table-column align="center" label='时间' prop="date_create" width="150"></el-table-column>
                    <el-table-column align="center" label='类型' prop="status" width="150"></el-table-column>
                    <el-table-column align="center" label='操作员工' prop="emp_name" width="150"></el-table-column>
                    <el-table-column align="center" label='原因' prop="remark"></el-table-column>
                </el-table>
                <el-radio style="margin:20px 0" v-model="radio" label="1">解冻</el-radio>
                <el-radio v-model="radio" label="2">拒绝解冻</el-radio>                
                <el-input type="textarea" :rows="4" placeholder="请输入原因" v-model="textarea" :maxlength="100">
                </el-input>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveClick">提交</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getStoreList,
        checkInfo,
        checkSubmit,
        edit
    } from "@/api/member/freezeCheck";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                storeList: null,
                checkList: [],
                typeList: [{ id: 0, name: '全部类型' }, { id: 1, name: '会员卡' }, { id: 2, name: '10次卡' }, { id: 3, name: '20次卡' }, { id: 4, name: '季卡' }, { id: 5, name: '年卡' }, { id: 6, name: '星星卡' }, { id: 7, name: '6次卡' }, { id: 8, name: '12次卡' }, { id: 9, name: 'E舞成名卡' }, { id: 10, name: '月卡' }],
                list: null,
                listLoading: false,
                checkListLoading: false,
                currentPage: 1,
                totalDataNumber: 1,
                searchPlaceholder: "请输入卡号",
                searchList: [{ id: 0, name: '会员卡号' }, { id: 1, name: '会员姓名' }, { id: 2, name: '手机号' }],
                search_type:0,
                status:1,
                radio:"1",
                search_font:"",
                textarea:"",
                infoDialog:false,
                formInline: {
                    mobile: "",
                    card_no: "",
                    name: "",
                    store_id: '',
                },
                infoData:{
                    store_name:"",
                    type_id:"",
                    card_no:"",
                    user_name:"",
                    vip_id:"",
                    index:"",
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            searchTypeChange(i){
                if(i==0){
                    this.searchPlaceholder="请输入卡号";
                }else if(i==1){
                    this.searchPlaceholder="请输入姓名"
                }else{
                    this.searchPlaceholder="请输入手机号"
                }
                this.search_font=""
            },
            getStore() {
                getStoreList({ category_id: 419 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else { 
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    
                    if(!this.list){
                        this.fetchData()
                    }
                });
            },
            // 操作
            editClick(row, index) {
                this.infoData.store_name=row.store_name;
                this.infoData.type_id=row.type_id;
                this.infoData.card_no=row.card_no;
                this.infoData.user_name=row.user_name;
                this.infoData.vip_id=row.vip_id;
                this.infoData.index=row.index;
                this.textarea="";
                this.radio="1";
                checkInfo({vip_id:row.vip_id}).then(res=>{
                    // console.log(res)
                    this.checkList=res;
                })
                this.infoDialog=true;
            },
            saveClick(){
                //console.log(this.textarea);
                if(!this.textarea){
                    this.$message.error("请输入原因")
                    return;
                }
                checkSubmit({vip_id:this.infoData.vip_id,status:this.radio,remark:this.textarea}).then(res=>{
                    this.$message({ type: res.code == 1 ? 'success' : 'error', message: res.message });
                    if(res.code==1){
                        this.list.splice(this.infoData.index,1)
                    }
                })
                this.infoDialog=false;
            },
            // 搜索
            searchClick() {
                this.fetchData();
                // optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                //     this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                //     this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                // });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                if(this.search_type==0){
                    this.formInline.card_no=this.search_font;
                    this.formInline.name="";
                    this.formInline.mobile="";
                }else if(this.search_type==1){
                    this.formInline.card_no="";
                    this.formInline.name=this.search_font;
                    this.formInline.mobile="";                   
                }else{
                    this.formInline.card_no="";
                    this.formInline.name="";
                    this.formInline.mobile=this.search_font;                      
                }
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    getList(this.formInline).then(response => {
                        this.list = response;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response;
                    this.listLoading = false;
                });
            },
        }
    };
</script>